<template>
  <div id="home">

    <h1>{{ msg }}</h1>

    <!-- 传入父组件的内容,当变量名称相同时，使用父组件传递过来的值。 -->
    <h2>head组件 -- {{title}} -- {{message}}</h2>


    <hr />

    <!-- 使用父组件的方法 -->
    <button id="btn" v-on:click="run('123')">执行父组件传递过来的方法</button>


    <hr />

    <!-- 使用父组件的方法 -->
    <button id="btn2" v-on:click="getParent()">当父组件吧自己传递过来的时候，获取父组件的数据和方法。</button>
  </div>
</template>



<script>
  export default {
    data() {
      return {
        msg: "head组件"
      };
    },
    methods: {

      getParent() {
        //父组件的传递
        // alert(this.title);

        // 当父组件把自己传递过来时
        // alert(this.home.title);

        // 当父组件把自己传递过来时
        this.home.run('123');

      }
    },
    // 接受父组件的传值
    // props: ["title", "message", "run", "home"],

    // 接受父组件的传值,类型校验。
    props: {
      "title": String,
      "message": String,
      "run": Function,
      "home": Object
    },
    mounted() {
      console.log("组件渲染完毕");
    }
  };
</script>

<style lang="scss">
</style>